<template>
    <div class="container" @click="toggle">
        <!-- <div class="bg">
            <video src="@/assets/audio/bg.mp4" autoplay muted loop></video>
        </div> -->
        <MyChart :option="item" :ebox="'box' + index" v-for="(item, index) in arr" :key="index" />
    </div>
</template>

<script setup>
import MyChart from '@/components/common/MyChart.vue'
import { reactive, ref } from 'vue'
import optionL1 from './option/myChartL1'
import optionL2 from './option/myChartL2'
import optionL3 from './option/myChartL3'
import optionM3 from './option/myChartM3'
import optionR1 from './option/myChartR1'
import optionR3 from './option/myChartR3'
import { useTheme } from '@/hook/useTheme'
import { useFullScreen } from '@/hook/useFullScreen'

const { switchDark } = useTheme()
const { toggleFull } = useFullScreen()
const toggle = () => {
    console.log('toggle')

    switchDark()
    toggleFull()
}
const arr = reactive([
    optionL1,
    optionL2,
    optionL3,
    optionM3,
    optionR1,
    optionR3,
])



</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

.box {
    position: absolute;
}

.box0 {
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
}

.box1 {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 300px;
    height: 200px;
}

.box2 {
    bottom: 0;
    left: 0;
    width: 300px;
    height: 200px;
}

.box3 {
    bottom: 0;
    transform: translateX(-50%);
    left: 50%;
    width: 600px;
    height: 200px;
}

.box4 {
    top: 0;
    right: 0;
    width: 300px;
    height: 200px;
}

.box5 {
    bottom: 0;
    right: 0;
    width: 300px;
    height: 200px;
}
</style>